<!DOCTYPE html>
<html style="height: 95%;">

<head lang="en">
    <meta charset="UTF-8">
    <title>VRS</title>
    <script type="text/javascript" src="js/localstorage.js"></script>
    <link rel="stylesheet" href="css/Stylesheet.css">
    <style type="text/css">
    	hr.style-four {
    		margin: 0;
    height: 5px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
    </style>
    <script type="text/javascript">
            if(localStorage.getItem("language") == "zh_cn"){
                document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
            }else if(localStorage.getItem("language") == "zh_tw"){
                document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
            }else{
                document.write("<script type='text/javascript' src='js/en.js'><\/script>");
            }
    </script>

    <script type="text/javascript">
        // 监听路由变化     显示内容变化
        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }
        Router.prototype.route = function(path, callback) {
            this.routes[path] = callback || function(){};
        };
        Router.prototype.refresh = function() {
            this.currentUrl = location.hash.slice(1) || '/';
            if(this.currentUrl == "/"){
                $("iframe").attr("src","template/kongzhi.html");
            }else{
                $("iframe").attr("src","template/"+this.currentUrl+".html");
            }
            // this.routes[this.currentUrl]();
        };
        Router.prototype.init = function() {
            window.addEventListener('load', this.refresh.bind(this), false);
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
        window.Router = new Router();
        window.Router.init();
        Router.route('/', function() {
            console.log(location.hash)
        });


    </script>

    <!-- <link rel="stylesheet" href="css/Stylesheet.css"> -->
    <!-- <link rel="Stylesheet" href="css/chosen.min.css"> -->
    <!-- <link rel="Stylesheet" href="css/jquery.ui.timepicker.css"> -->
    <!-- <link rel="Stylesheet" href="css/jquery-ui-1.10.3.custom.min.css"> -->
<!--  -->
    <!-- <script type="text/javascript" src="js/swfobject.js"></script> -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/javascript.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.tablednd_0_5.js"></script> -->
    <!-- <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script> -->

<style type="text/css">
    iframe{width: 100%;height: 100%;border: 0px;}
    a{cursor: pointer;}
</style>
<script type="text/javascript">
    function ershow(data){
        // $("iframe").attr("src","template/"+data+".html");
    }
    $(function () {
        // $("iframe").attr("src","template/kongzhi.html");
        $("iframe").attr("style","width:100%;height:"+JSON.stringify($("html").height()-120)+"px");
    })
</script>
</head>

<body style="background: #d2d2d2 url('img/bodybg.png') repeat-x;">

    <div class="dropdown" style="position: absolute;right: 30px;top:10px;z-index: 100;color: #fff;">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
            <script>
            document.write(language.Language_switching)
            </script><span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1"  onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1"  onclick="localStorage.setItem('language','en');location.reload()">English</a>
            </li>
        </ul>
    </div>



    
    <div id="headercontainer">
        <img src="img/TourTrax-Logo.png" alt="TourTrax logo" class="mobilizelogo">
        <!-- <div class="mobilizelogo" style="color: #0fb5f1;font-size: 2.5em;margin: 0px;margin-left: 10px;line-height: 85px;">
            <script>document.write(language.guanli)</script>
        </div> -->
        <!-- <img class="customerLogo" src="" alt="BCS TourTrax 2.0 (Demo)" title="BCS TourTrax 2.0 (Demo)"> -->
        <div class="logindetails">
            <p>
                <script>document.write(language.Welcome)</script>
                <a href="javascript:;"><script>document.write(language.account)</script></a> or
                <a href="javascript:;" onclick="location.href='login.html'"><script>document.write(language.login_out)</script></a>
            </p>
            <p>
                <a href="javascript:;"><img src="img/helpicon.png" alt="help icon"></a> 
                <a href="javascript:;"><script>document.write(language.help)</script></a>
            </p>
        </div>
        <!--End logindetails-->
    </div>
    <div id="wrapper">
        <div id="nav">
            <div class="menu_list">
            	
            	 <p class="menu_head" id="nav_dash">
                    <script>document.write(language.Control_panel)</script>
                </p>
                <div class="menu_body"> 
                    <a href="#kongzhi" onclick="ershow('kongzhi')">
                        <script>document.write(language.kongzhi)</script>
                    </a>
                    <a href="#map" onclick="ershow('map')">
                        <script>
                            document.write(language.kzmap)
                        </script>
                    </a>                   
                </div>
            	
            	
            	
            	
            	
                <!--<a href="#kongzhi" class="navLink" onclick="ershow('kongzhi');location.reload();">
                    <p class="menu_head" id="nav_dash">
                        <script>document.write(language.kongzhi)</script>
                    </p>
                </a>-->
                <p class="menu_head" id="nav_opsetup">
                    <script>
                    document.write(language.weihu)
                    </script>
                </p>
                <div class="menu_body"> 
                     <a href="#weihu_zuzhi" onclick="ershow('weihu_zuzhi')">
                        <script>
                            document.write(language.weihu_zuzhi)
                            </script>
                        </a> 
                        <a href="#redoc" onclick="ershow('redoc')">
                        <script>document.write(language.redoc)</script>
                    </a>
                    <a href="#sedoc" onclick="ershow('sedoc')">
                        <script>document.write(language.sedoc)</script>
                    </a>
                     <a href="#weihu_changsuo" onclick="ershow('weihu_changsuo')">
                        <script>
                        document.write(language.weihu_changsuo)
                        </script>
                    </a> 
                	
                     <!--<a href="#weihu_chengban" onclick="ershow('weihu_chengban')">
                        <script>
                        document.write(language.Contractor+language.weihu_yuangong)
                        </script>
                    </a> 

                    <a href="#weihu_chengbancompany" onclick="ershow('weihu_chengbancompany')">
                        <script>
                        document.write(language.Contractor)
                        </script>
                    </a>-->
                    <a href="#weihu_chengbanproject" onclick="ershow('weihu_chengbanproject')">
                        <script>
                        document.write(language.Undertake_project)
                        </script>
                    </a>

                     <a href="#weihu_shoufang" onclick="ershow('weihu_shoufang')">
                        <script>
                        document.write(language.weihu_shoufang)
                        </script>
                    </a>
                     <a href="#weihu_yuangong" onclick="ershow('weihu_yuangong')">
                        <script>
                        document.write(language.weihu_yuangong)
                        </script>
                    </a>
                    <a href="#weihu_wupin" onclick="ershow('weihu_wupin')">
                        <script>
                        document.write(language.weihu_wupin)
                        </script>
                    </a>
                    <a href="#xitong_fangke" onclick="ershow('xitong_fangke')">
                        <script>
                        document.write(language.xitong_fangke)
                        </script>
                    </a>
                    <a href="#Work_type" onclick="ershow('Work_type')">
                    	<script>document.write(language.Work_type)</script>
                    </a> 
                    <a href="#License_Permit" onclick="ershow('License_Permit')">
                    	<script>document.write(language.License_Permit)</script>
                    </a> 
                    <a href="javascricp:;" onclick="ershow('License_Permit')">
                    	<script>document.write(language.alarms_type)</script>
                    </a> 
                    
                    <hr class="style-four">
                     <a href="#weihu_fangke" onclick="ershow('weihu_fangke')">
                        <script>
                        document.write(language.weihu_fangke)
                        </script>
                    </a>                 
                    <a href="#chengban_yucheng" onclick="ershow('chengban_yucheng')"><script>document.write(language.Hostingcompany)</script></a> 
                    
                    
                </div>
                <!-- <p class="menu_head" id="nav_gensetup">
                    <script>
                    document.write(language.xitong)
                    </script>
                </p>
                <div class="menu_body"> 
                    
                </div> -->
                
                <p class="menu_head" id="nav_opreport">
                    <script>
                        document.write(language.gongzuo)
                    </script>
                </p>
                <div class="menu_body"> 
                    <a href="#fangke_yy" onclick="ershow('fangke_yy')">
                        <script>
                            document.write(language.visitorAppointment)
                        </script>
                    </a>
                    <a href="#chengban_yy" onclick="ershow('chengban_yy')">
                        <script>
                            document.write(language.contractorAppointment)
                        </script>
                    </a>
                    <a href="#fangke_yufang" onclick="ershow('fangke_yufang')"><script>document.write(language.viRecord)</script>
                     </a> 
                    <a href="#gongzuo_jieyong" onclick="ershow('gongzuo_jieyong')">
                        <script>
                        document.write(language.gongzuo_jieyong)
                        </script>
                    </a>
                    <a href="#gongzuo_xiangmu" onclick="ershow('gongzuo_xiangmu')">
                        <script>
                            document.write(language.gongzuo_xiangmu)
                        </script>
                    </a>
                    <a href="#Evacuation" onclick="ershow('Evacuation')">
                        <script>
                            document.write(language.Evacuation)
                        </script>
                    </a>
                   
                </div>
                <!--
                <p class="menu_head" id="nav_messaging">行动报表</p>
                <div class="menu_body"> 
                     <a href="ReportActivity.aspx">操作</a> 
                     <a href="ReportUnassignedActivity.aspx">未配置的任务</a> 
                     <a href="ReportJobsInProgress.aspx">工作进行中</a> 
                     <a href="ReportAssetProofOfAttendance.aspx">出勤证明</a> 
                     <a href="ReportActionLists.aspx">行动清单报告</a> 
                     <a href="ReportSrvEngSiteAttendance.aspx">场所操作</a> 
                     <a href="ReportLogins.aspx">电话登录</a>
                 </div>
            -->
                <p class="menu_head" id="nav_mgmtreport"><script>document.write(language.Report)</script></p>
                <div class="menu_body"> 
                    <a href="#baobiao_fangke" onclick="ershow('baobiao_fangke')">
                        <script>document.write(language.baobiao_fangke)</script>
                    </a>
                    <a href="#vqtm" onclick="ershow('vqtm')">
                        <script>document.write(language.Visitor_quantity_trend_map)</script>
                    </a>
                    <a href="#baobiao_chengban" onclick="ershow('baobiao_chengban')">
                        <script>document.write(language.baobiao_chengban)</script>
                    </a>
                    <a href="#cbsfktj_Report" onclick="ershow('cbsfktj_Report')">
                        <script>document.write(language.Contractor_visitor_statistics)</script>
                    </a>
                    <a href="#baobiao_jieyong" onclick="ershow('baobiao_jieyong')">
                        <script>document.write(language.baobiao_jieyong)</script>
                    </a>
                    <a href="#baobiao_Report" onclick="ershow('baobiao_Report')">
                        <script>document.write(language.baobiao_Report)</script>
                    </a>
                    <a href="#EndOfDay" onclick="ershow('EndOfDay')">
                        <script>document.write(language.end_of_day_report_guest)</script>
                    </a>
                     <a href="#endofday_loan_item" onclick="ershow('endofday_loan_item')">
                        <script>document.write(language.end_of_day_loan_item)</script>
                    </a>
                     <a href="#alarms" onclick="ershow('alarms')">
                        <script>
                            document.write(language.alarms)
                        </script>
                    </a>
                </div>
                <p class="menu_head" id=""><script>document.write(language.xitongpeizhi)</script></p>
                <div class="menu_body"> 
                    <a  onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
                    <a  onclick="localStorage.setItem('language','zh_tw');location.reload()">繁体中文</a>
                    <a  onclick="localStorage.setItem('language','en');location.reload()">English</a>
                    <a href="javascrict:;">
                        <script>document.write(language.sms)</script>
                    </a>
                    <a href="javascrict:;">
                        <script>document.write(language.Mail_server_settings)</script>
                    </a>                  
                </div>
                <a href="#" class="navLink" onclick="location.href='login.html'">
                    <p class="menu_head" id="nav_logout"><script>document.write(language.login_out)</script></p>
                </a>
            </div>
            <!--End menu_list-->
        </div>
        <!-- nav -->
        <div id="maincontent" style="margin-bottom: 0px;">
            <iframe src=""></iframe>
            
        </div>
        <div id="status">
            <div class="reds"></div>
            <div class="status green"><script type="text/javascript">document.write(language.alarms)</script>(0)</div>
        </div>
        <div style="width: 400px;height: 45px;margin: 0 auto;text-align: center;z-index: 10;line-height: 45px;">Copyright © 2017 Brooklyn Computer System (H.K) Limited</div>
    </div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">
                    <script type="text/javascript">document.write(language.alarms_details)</script>
                </h4>
            </div>
            <div class="modal-body" style="max-height: 400px;overflow-y: scroll;">
                <table class="table table-hover table-striped table-bordered" cellspacing="0" style="text-align: center;box-shadow: 0px 0px;">
                    <thead>
                        <tr>
                            <th><script type="text/javascript">document.write(language.order_number)</script></th>
                            <th><script type="text/javascript">document.write(language.type)</script></th>
                            <th><script type="text/javascript">document.write(language.name)</script></th>
                            <th><script type="text/javascript">document.write(language.Reason)</script></th>
                            <th><script type="text/javascript">document.write(language.operation)</script></th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button> -->
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>

</html>
<style type="text/css">
    table tr th{text-align: center;}
    tr td button {
        padding: 2px 5px;
        margin: 0px 3px;
        border-radius: 4px;
        border: 1px;
        color: #fff;
    }
    #status{
        position: absolute;
        bottom: 10px;left: 20px;border-radius: 5px;
    }
    .status{
        color: #fff;width: 200px;line-height: 30px;text-align: center;margin-bottom: 10px;cursor: pointer;
    }
    .green{
        background: #02d806;
    }
    .red{
        background: red;
    }
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    var jingbao = [];
    var jingshu = function () {
        var a = Math.floor(Math.random()*100);
        var b = Math.floor(Math.random()*1000);
        var c = a+"_"+b;
        if(a<12){
            var d = [c,0,"超时"]
        }else{
            var d = [c,0,"物品未还"]
        }
        if(a < 24){
            jingbao.push(d);
            $("div.green.status").attr("style","background: red;");
            var jing = 0;
            for(var a = 0;a<jingbao.length;a++){
                if(jingbao[a][1] == 0){
                    jing += 1;
                }
            }
            $("div.green.status").html(language.alarms+"("+jing+")");
            $(".reds").append("<div class='"+c+" status red'>"+language.alarms+"("+c+")</div>");
            setTimeout(function(){$("."+c).css("display","none")},5000);
        }
    }
    var runjing = setInterval(jingshu,10000);
    function chuli(id){
        console.log(id)
        if(confirm(language.Is_it_determined_to_be_processed)){
            jingbao[id][1] = 1;
            add();
            var jing = 0;
            for(var a = 0;a<jingbao.length;a++){
                if(jingbao[a][1] == 0){
                    jing += 1;
                }
            }
            if(jing == 0){
                $("div.green.status").attr("style","background: #02d806;");
                $("div.green.status").html(language.alarms+"("+jing+")");
                $(".reds").html("");
            }
        }
    }
    function sortNumber(a,b)
    {
        return a[1] - b[1]
    }
    function add(){
        jingbao = jingbao.sort(sortNumber)
        var html = "";
        for(var a = 0;a<jingbao.length;a++){
            html += "<tr>\
                        <td>"+(a+1)+"</td>\
                        <td>访客</td>\
                        <td>"+jingbao[a][0]+"</td>\
                        <td>"+jingbao[a][2]+"</td>"
                if(jingbao[a][1] == 0){
                    html += "<td><button onclick='chuli("+a+")' style='background: red;''>"+language.Untreated+"</button></td>"
                }else{
                    html += "<td>"+language.processed+"</td>"
                }
                    html += "</tr>"
        }
        $(".modal-body tbody").html(html);
    }
    $("div.status,.reds").click(function(){
        $('#myModal').modal('show');
        add();
    })
</script>